<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Mapbox GL Draw Example - Draw Rectangle</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.4.3/mapbox-gl-draw.js'></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet">
    <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.4.3/mapbox-gl-draw.css'
        type='text/css' />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>

    <div id="map"></div>

    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoibGF3Z3VvIiwiYSI6ImNsdXhrM3IzZTByMmIyaXBoYXAyMWg4bWMifQ.4o6GIEMhl0Aaef5TQfBIiQ';

        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v11',
            center: [-74.5, 40],
            zoom: 9
        });

        map.on('load', function () {
            var draw = new MapboxDraw({
                displayControlsDefault: true,
                controls: {

                }
            });

            map.addControl(draw);

            map.on('draw.create', function (e) {
                var features = draw.getAll();
                console.log(features);
            });
        });


        var Draw = new MapboxDraw();

        map.addControl(Draw, 'top-left');
    </script>
</body>

</html>